<!--
 * @Author: your name
 * @Date: 2021-08-17 20:42:48
 * @LastEditTime: 2021-08-25 12:12:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\views\Home\HomePage.vue
-->
<template>
  <!-- 首页 -->
  <div id="home-page">
    <el-container>
      <el-aside width="500px" class="aside-container">
        <el-row class="aside-title">
          <el-col :span="10">
            <h1>今日销售额</h1>
          </el-col>
          <el-col :span="7">
            <p>
              菜品库存超出:<span>{{ stockOverNumber }}</span>
            </p>
          </el-col>
          <el-col :span="7">
            <p>
              菜品库存过低:<span>{{ stockBelowNumber }}</span>
            </p>
          </el-col>
        </el-row>
        <div class="aside-content">
          <div class="content-item" style="background-color: red">
            <h1>{{todayTotalRevenue.toFixed(2)}}</h1>
            <p>今日总营收(元)</p>
          </div>
          <div class="content-item" style="background-color: #ff9900">
            <h1>{{todayDiscountAmount.toFixed(2)}}</h1>
            <p>今日优惠金额(元)</p>
          </div>
          <div class="content-item" style="background-color: #1aa5ff">
            <h1>{{orderNumber.toFixed(2)}}</h1>
            <p>今日订单数(元)</p>
          </div>
          <div class="content-item" style="background-color: #66cccc">
            <h1>{{todayRefundNumber.toFixed(2)}}</h1>
            <p>今日退款菜品数(份)</p>
          </div>
        </div>
      </el-aside>
      <el-main class="main-container">
        <el-row class="main-title">
          <el-col :span="6">
            <p>营业状态</p>
          </el-col>
        </el-row>
        <div class="process-box">
          <el-row class="process-row process-row-1">
            <el-col :span="5">
              <h4>堂食订单(就餐中)</h4>
            </el-col>
            <el-col :span="19">
              <el-progress
                :percentage="percentage"
                :color="customColor"
              ></el-progress>
            </el-col>
          </el-row>
          <el-row class="process-row">
            <el-col :span="5">
              <h4>外卖订单(进行中)</h4>
            </el-col>
            <el-col :span="19">
              <el-progress
                :percentage="percentage1"
                :color="customColor"
              ></el-progress>
            </el-col>
          </el-row>
          <el-row class="process-row">
            <el-col :span="5">
              <h4>当前预约人数</h4>
            </el-col>
            <el-col :span="19">
              <el-progress
                :percentage="currentReservationNumber"
                :color="customColor"
              ></el-progress>
            </el-col>
          </el-row>
          <el-row class="process-row">
            <el-col :span="5">
              <h4>当前排号人数</h4>
            </el-col>
            <el-col :span="19">
              <el-progress
                :percentage="currentPlatoonNumber"
                :color="customColor"
              ></el-progress>
            </el-col>
          </el-row>
        </div>
        <div class="process-map-box">
          <el-row>
            <el-col :span="12">
              <el-progress
                type="circle"
                :percentage="realIncome"
                :color="customBgcColor"
              ></el-progress>
            </el-col>
            <el-col :span="12" class="process-tip">
              <el-row class="tip-row">
                <el-col :span="7">
                  <i class="tip-1"></i>
                </el-col>
                <el-col :span="17">
                  <span>优惠金额</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <i class="tip-2"></i>
                </el-col>
                <el-col :span="17">
                  <span>实际总营收</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <!-- 表格数据头部部分 -->
    <el-container class="table-container">
      <el-header class="table-header" height="4rem">
        <h4>今日菜品销售排行榜</h4>
      </el-header>
      <!-- 表格数据内容部分 -->
      <el-container>
        <el-main class="table-content">
          <div class="table-bgc">
            <div class="table-padding">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                @selection-change="handleSelectionChange"
                class="table-box"
              >
                <el-table-column label="菜品编号" align="center">
                  <template slot-scope="scope">{{ scope.row.dishNo }}</template>
                </el-table-column>
                <el-table-column label="菜品名称" align="center" width="150">
                  <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="菜品单价" align="center">
                  <template slot-scope="scope">{{
                    scope.row.price.toFixed(2)
                  }}</template>
                </el-table-column>
                <el-table-column label="销售笔数" align="center">
                  <template slot-scope="scope">{{
                    scope.row.sales
                  }}</template>
                </el-table-column>
                <el-table-column label="销售金额" align="center">
                  <template slot-scope="scope">{{
                    scope.row.amount
                  }}</template>
                </el-table-column>
                <el-table-column label="折扣额度" align="center">
                  <template slot-scope="scope">{{
                    scope.row.discount
                  }}</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-main>
      </el-container>
      <!-- 分页组件 -->
      <Pagination 
      :totalCount="allCount"
      @shareData="shareData"
      ></Pagination>
    </el-container>
  </div>
</template>

<script>
import Pagination from '../../components/common/Pagination.vue'
export default {
  data() {
    return {
      stockOverNumber: 0, //菜品库存超出
      stockBelowNumber: 0, //菜品库存低于
      todayTotalRevenue: 0, //今日总营收
      todayDiscountAmount: 0, //今日优惠金额
      orderNumber: 0, //今日订单数
      todayRefundNumber: 0, //今日退款菜品数
      percentage: 100, //堂食订单完成度
      percentage1:0,//外卖订单
      currentReservationNumber:0,//当前预约人数
      currentPlatoonNumber:0,//当前排号人数
      realIncome:0,//实际收入
      customColor: "#409eff", //进度条颜色
      customBgcColor: "#F56C6C", //环形进度条背景颜色
      page:1,//分页页码
      pageSize:5,//每页展示数据条数
      allCount:0,//总数据条数
      tableData: [
        {
          category: "炒菜",//菜品名称
          number:'2584585',//菜品编号
          price:12.01,//菜品单价
          numberOfSales:10,//销售笔数
          salePrice:100,//销售金额
          dishname:'炒菜',//菜品类别
          remarks:'',
          status:'正常',
        },
        {
          category: "炒菜",
          number:'2584585',//菜品编号
           price:12.00,//菜品单价
           numberOfSales:10,//销售笔数
           salePrice:100,//销售金额
           Discountimit:30,//折扣额度
           dishname:'炒菜',//菜品类别
          remarks:'',
          status:'正常',
        },
        {
          order: "001",//序号
          category: "炒菜",
          number:'2584585',//菜品编号
          price:12.00,//菜品单价
          numberOfSales:10,//销售笔数
          salePrice:100,//销售金额
          Discountimit:30,//折扣额度
          dishname:'炒菜',//菜品类别
          remarks:'',
          status:'正常',
        },
        {
          order: "001",//序号
          category: "炒菜",
          number:'2584585',//菜品编号
          price:12.00,//菜品单价
          numberOfSales:10,//销售笔数
          salePrice:100,//销售金额
          Discountimit:30,//折扣额度
          dishname:'炒菜',//菜品类别
          remarks:'',
          status:'正常',
        },
        {
          order: "001",//序号
          category: "炒菜",
          number:'2584585',//菜品编号
          price:12.00,//菜品单价
          numberOfSales:10,//销售笔数
          salePrice:100,//销售金额
          Discountimit:30,//折扣额度
        },
      ],
    };
  },
  created(){
    this.statisticalInfo();
    this.getcategorysalesInfo(this.page,this.pageSize)
  },
  methods:{
    /**
     * @description: 表格子组件和分页子组件向父组件传值触发的函数
     * @param {*} v 传给父组件值 是一个对象
     * @return {*}
     */    
    shareData(v){
      this.page=v.nowPage;//当前页
      this.pageSize=v.pageCount; //当前页数据条数
      // if(this.flag){//使用查询功能时，渲染的表格数据
        // console.log('xxxxxx');
        this.getcategorysalesInfo(this.page,this.pageSize)
      // }else{//没有使用查询功能时，渲染表格的数据
      //   this.getDishesCategoryInfo(this.page,this.pageSize);//更新表格数据
      // }
    },
    /**
     * @description: 统计今日销售额等信息函数
     * @param {*}
     * @return {*}
     */    
    async statisticalInfo(){
      const {data:res}=await this.axios.get("/index/top");
      if(res.code==200){
        // console.log(res.data);
        this.stockOverNumber=res.data.stockOverNumber
        this.stockBelowNumber=res.data.stockBelowNumber
        this.todayTotalRevenue=res.data.todayTotalRevenue
        this.todayDiscountAmount=res.data.todayDiscountAmount
        this.orderNumber=res.data.orderNumber
        this.todayRefundNumber=res.data.todayRefundNumber
        this.currentReservationNumber=res.data.currentReservationNumber
        this.currentPlatoonNumber=res.data.currentPlatoonNumber
        this.realIncome=res.data.todayTotalRevenue-res.data.todayDiscountAmount;//实际总收入
      }
    },
      /* toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }, */
    /**
     * @description: 分页查询菜品销售排行榜
     * @param {*}
     * @return {*}
     */    
    async getcategorysalesInfo(page,pageSize){
      const {data:res}=await this.axios.post("/index/list",{
        page:page,
        pageSize:pageSize
      })
      if(res.code==200){
        console.log('首页的数据',res);
        this.tableData=res.data;
        this.allCount=res.count;
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(){

    },
    handleDelete(){

    }
  },
  components:{
    Pagination
  }
};
</script>

<style lang='less' scoped>
.aside-container {
  border: 0.1rem solid #dbe0e9;
  // background-color: red;
  & .aside-title {
    height: 4rem;
    background-color: #f2f2f2;
    line-height: 4rem;
    border-bottom: 0.1rem solid #dbe0e9;
    & h1 {
      font-size: 1.6rem;
      padding-left: 2rem;
      color: #666;
      font-weight: 400;
    }
    & p {
      color: #333;
      font-size: 1.2rem;
      & > span {
        color: red;
        padding-left: 0.5rem;
      }
    }
  }
  & .aside-content {
    width: 100%;
    height: 30rem;
    & .content-item {
      float: left;
      width: 20rem;
      height: 12rem;
      // background-color: red;
      margin-left: 3rem;
      margin-top: 2rem;
      color: white;
      & h1 {
        text-align: center;
        padding-top: 2rem;
        font-size: 3rem;
        font-weight: 400;
      }
      & p {
        text-align: center;
        padding-top: 2rem;
        font-size: 1.5rem;
        font-weight: 400;
      }
    }
  }
}
//main
.main-container {
  border: 0.1rem solid #dbe0e9;
  margin-left: 1rem;
  padding: 0;
  & .main-title {
    height: 4rem;
    background-color: #f2f2f2;
    line-height: 4rem;
    border-bottom: 0.1rem solid #dbe0e9;
    & p {
      font-size: 1.6rem;
      padding-left: 2rem;
      counter-reset: #666;
      font-weight: 400;
    }
  }
  & .process-box {
    width: 80%;
    height: 12rem;
    margin: 1rem auto;
    overflow: hidden;
    & .process-row {
      margin: 1rem 0;
      & h4 {
        color: #666;
        font-size: 1.4rem;
      }
    }
    & .process-row-map {
      background-color: aqua;
      height: 50px;
      width: 100%;
    }
  }
  & .process-map-box {
    width: 40%;
    height: 13rem;
    margin: 1rem auto;
    overflow: hidden;
    & .process-tip {
      padding-top: 4rem;
      & .tip-row {
        margin-bottom: 1rem;
      }
      & .tip-1 {
        display: inline-block;
        width: 3rem;
        height: 2rem;
        background-color: #e5e9f2;
      }
      & .tip-2 {
        display: inline-block;
        width: 3rem;
        height: 2rem;
        background-color: #f56c6c;
      }
      & span {
        color: #000;
      }
    }
  }
}
.table-container {
  border: 0.1rem solid #dbe0e9;
  margin-top: 1rem;
  background-color: #fff;
  & .table-header {
    width: 100%;
    background-color: #f2f2f2;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    & h4 {
      font-size: 1.6rem;
      color: #666;
      font-weight: 400;
    }
  }
}
.table-content {
  padding: 0;
  & > .table-bgc {
    margin: 1rem 1rem 1rem;
    background-color: #f5f9fc;
    // height: 50rem;
    overflow: hidden;
    box-sizing: border-box;
    & > .table-padding {
      margin: 1rem;
    }
  }
}
</style>
